import type { Ref, ComputedRef, CSSProperties } from 'vue';

/**
 * 允许「值 / Ref / Computed / Getter 函数」几种写法
 */
export type MaybeRefOrGetter<T> =
  | T
  | Ref<T>
  | ComputedRef<T>
  | (() => T);

/** 阈值高亮配置 */
export interface Thresholds {
  up?: number;
  down?: number;
  color?: string;
}

export interface DataItemOptions {
  /* —— 1. 必需 —— */
  label: MaybeRefOrGetter<string>;
  value: MaybeRefOrGetter<number>;

  /* —— 2. 带默认值 —— */
  decimals?: MaybeRefOrGetter<number>;
  extraDigits?: MaybeRefOrGetter<number>;
  prefix?: MaybeRefOrGetter<string>;
  suffix?: MaybeRefOrGetter<string>;
  unit?: MaybeRefOrGetter<string>;
  loading?: MaybeRefOrGetter<boolean>;

  /* —— 3. 可选 —— */
  formatter?: (v: number) => string;          // 函数不必响应式
  thresholds?: MaybeRefOrGetter<Thresholds>;
  tooltip?: MaybeRefOrGetter<string>;
  onClick?: (e: MouseEvent) => void;          // 函数不必响应式

  /* —— 4. 样式/类名 —— */
  wrapperClass?: MaybeRefOrGetter<string>;
  wrapperStyle?: MaybeRefOrGetter<CSSProperties | string>;
  labelClass?: MaybeRefOrGetter<string>;
  labelStyle?: MaybeRefOrGetter<CSSProperties | string>;
  separatorClass?: MaybeRefOrGetter<string>;
  separatorStyle?: MaybeRefOrGetter<CSSProperties | string>;
  valueClass?: MaybeRefOrGetter<string>;
  valueStyle?: MaybeRefOrGetter<CSSProperties | string>;
  skeletonClass?: MaybeRefOrGetter<string>;
  skeletonStyle?: MaybeRefOrGetter<CSSProperties | string>;
}

/** 
 * class 可以是：
 * - 字符串（如 'foo bar'）
 * - 字符串数组（如 ['foo','bar']）
 * - 对象形式的 CSS Modules / 条件类名（如 { active: isActive }）
 */
export type ClassType =
  | string
  | string[]
  | Record<string, boolean>;

/**
 * style 可以是：
 * - 普通的对象：键是 CSS 属性驼峰写法，值是字符串或数字
 *   （比如 { fontSize: '12px', marginTop: 8 }）
 */
export type StyleType = Record<string, string | number>;